<template>
  <div class="app-container">
    <div class="filterDiv">
      <label id="level01" class="label">统计期间</label>
      <el-date-picker v-model="listQuery.billDate1" :editable="false" type="date" placeholder="开始日期" size="small" :clearable="false" value-format="yyyy-MM-dd" />
      <span class="zhi">至</span>
      <el-date-picker v-model="listQuery.billDate2" :editable="false" type="date" placeholder="结束日期" size="small" :clearable="false" value-format="yyyy-MM-dd" />
      <label class="label">当前模板</label>
      <el-select v-model="selectedTemplate" size="small" placeholder="当前模板" class="template-select" @change="templateChange">
        <el-option v-for="item in templatelist" :key="item.id" :label="item.templateName" :value="item.id" />
      </el-select>
      <el-button size="small" type="default" round style="margin-left:0" @click="saveAsNew">另存为新模板</el-button>
      <el-button size="small" type="primary" round @click="getList">查询</el-button>
      <el-button-group>
        <el-button type="primary" size="small" round icon="el-icon-printer" title="打印" @click="printBook" />
        <el-button type="primary" size="small" round icon="el-icon-document" title="导出" @click="exportBook" />
      </el-button-group>
      <br />
      <label class="label">报表类型</label>
      <el-select v-model="listQuery.groupDateType" placeholder="报表类型" size="small">
        <el-option v-for="item in methodList" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label ml10">品类级次</label>
      <el-select v-model="listQuery.invCatgLevel" placeholder="品类级次" size="small">
        <el-option v-for="item in invCatgLevel" :key="item" :label="item" :value="item" />
      </el-select>
      <el-checkbox v-model="listQuery.isRollup" :false-label="0" :true-label="1" class="ml10">显示合计</el-checkbox>
      <br />
      <label id="level01" class="label">一级汇总</label>
      <el-select v-model="listQuery.param1" style="width:100px" placeholder="一级汇总" size="small">
        <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label ml10">二级汇总</label>
      <el-select v-model="listQuery.param2" style="width:100px" placeholder="二级汇总" size="small">
        <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label ml10">三级汇总</label>
      <el-select v-model="listQuery.param3" style="width:100px" placeholder="三级汇总" size="small">
        <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label ml10">四级汇总</label>
      <el-select v-model="listQuery.param4" style="width:100px" placeholder="四级汇总" size="small">
        <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
      </el-select>
      <label class="label ml10">五级汇总</label>
      <el-select v-model="listQuery.param5" style="width:100px" placeholder="五级汇总" size="small">
        <el-option v-for="item in levellist" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div class="contentDiv">
      <el-table :key="tableKey" v-loading="listLoading" :data="pageData" fit highlight-current-row border style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" />
        <el-table-column v-for="(it, i) in columns" :key="i" :label="it.labelName" :prop="it.expression" :align="it.align" />
      </el-table>
      <pagination v-show="total>20" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageNum" @pagination="getDataByPage" />
    </div>
  </div>
</template>
<script>
import { getEveryDayTable, getTemplateListByType, getColumnLabel, exportEveryDayBook, printEveryDayBook } from '@/api/table'
import { getNowDate } from '@/utils/index'
export default {
  name: 'TableEveryDay',
  filters: {
    Fixed: function(str) {
      return parseFloat(str).toFixed(2)
    }
  },
  data() {
    return {
      total: 0,
      tableKey: 0,
      tableData: [],
      listLoading: true,
      columns: [],
      templatelist: [],
      selectedTemplate: '',
      pageData: [],
      levellist: [],
      methodList: [],
      invCatgLevel: [],
      listQuery: {
        billDate1: getNowDate(1),
        billDate2: getNowDate(),
        pageIndex: 1,
        pageNum: 20,
        groupDateType: '',
        invCatgLevel: '',
        isRollup: 1,
        param1: '',
        param2: '',
        param3: '',
        param4: '',
        param5: ''
      }
    }
  },
  created() {
    this.getColumnNames()
    this.getTemplateList()
  },
  methods: {
    templateChange(val) {
      const data = this.templatelist.find((it) => it.id === val)
      this.listQuery.groupDateType = data.groupDateType
      this.listQuery.invCatgLevel = data.invCatgLevel
      this.listQuery.isRollup = data.isRollup
      this.listQuery.param1 = data.param1
      this.listQuery.param2 = data.param2
      this.listQuery.param3 = data.param3
      this.listQuery.param4 = data.param4
      this.listQuery.param5 = data.param5
    },
    saveAsNew() {
      sessionStorage.newParams = JSON.stringify({
        groupDateType: this.listQuery.groupDateType,
        invCatgLevel: this.listQuery.invCatgLevel,
        isRollup: this.listQuery.isRollup,
        param1: this.listQuery.param1,
        param2: this.listQuery.param2,
        param3: this.listQuery.param3,
        param4: this.listQuery.param4,
        param5: this.listQuery.param5
      })
      sessionStorage.rptTemplateId = this.selectedTemplate
      this.$router.push('/set/template/rptAdd?type=new&code=everydayTotal')
    },
    getTemplateList() {
      getTemplateListByType('everydayTotal').then((res) => {
        this.templatelist = res.data.data || []
        const selectedObj = this.templatelist.find((it) => it.isDefault === 1)
        this.selectedTemplate = selectedObj.id
        this.templateChange(this.selectedTemplate)
        this.$nextTick(() => {
          this.getList()
        })
      })
    },
    exportBook() {
      exportEveryDayBook(this.listQuery)
    },
    printBook() {
      printEveryDayBook(this.listQuery)
        .then((res) => {
          window.open('http://' + window.location.host + res.data.data)
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getDataByPage() {
      var pageIndex = this.listQuery.pageIndex
      var arr = []
      var min = pageIndex * 20 - 20
      var max = pageIndex * 20 <= this.total ? pageIndex * 20 : this.total
      for (var i = min; i < max; i++) {
        arr.push(this.tableData[i])
      }
      this.pageData = arr
    },
    getList() {
      this.listLoading = true
      this.listQuery.id = this.selectedTemplate
      getEveryDayTable(this.listQuery)
        .then((res) => {
          this.listLoading = false
          this.columns = res.data.columns
          this.columns.forEach((item, index) => {
            item.align =
              item.horizontalAlign === 0
                ? 'left'
                : item.horizontalAlign === 1
                  ? 'center'
                  : item.horizontalAlign === 2
                    ? 'right'
                    : ''
          })
          this.tableData = res.data.dataSet || []
          this.total = res.data.dataSize
          this.getDataByPage()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getColumnNames() {
      getColumnLabel('everydayTotal').then((res) => {
        const selectObj = res.data.data || {}
        this.levellist = selectObj.groupType || []
        this.methodList = selectObj.groupDateType || []
        this.invCatgLevel = selectObj.invCatgLevel || []
      })
    }
  }
}
</script>
<style scoped>
.label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 5px 0 0;
}
.ml10 {
  margin-left: 10px;
}
</style>
